<template>
  <div id="category">
    <nav-bar>
      <template v-slot:left></template>
      <template v-slot:default>商品分类</template>
      <template v-slot:right></template>
    </nav-bar>

    <div id="mainbox">
      <!-- 顶部排序 -->
      <van-tabs class="ordertab" v-model="active" @click-tab="tabClick">
        <van-tab title="销量排序" name="sales"></van-tab>
        <van-tab title="价格排序" name="price"></van-tab>
        <van-tab title="评论排序" name="comments_count"></van-tab>
      </van-tabs>

      <!-- sidebar -->
      <van-sidebar class="leftmenu" v-model="activeKey">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item v-for="item in categories" :key="item.id" :title="item.name" :name="item.id">
            <van-sidebar-item v-for="sub in item.children" :key="sub.id" :title="sub.name" @click="getGoods(sub.id)"/>
          </van-collapse-item>
        </van-collapse>
      </van-sidebar>

      <!-- 商品列表 -->
      <van-list class="goodslist"
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
      >
        <van-card
            v-for="(item, index) in showGoods" :key="index"
            :num="item.comments_count"
            :tag="item.comments_count >= 0 ? '流行' : ''"
            :price="item.price"
            :desc="item.updated_at.substr(0, 10)"
            :title="item.title"
            :thumb="item.cover_url"
            lazy-load
            @click="itemClick(item.id)"
        />
      </van-list>
    </div>

    <back-top v-show="isShowBackTop" @bTop="bTop"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import BackTop from "components/common/backtop/BackTop";

import {getCategory, getCategoryGoods} from "network/category";

import {ref, reactive, torefs, computed, watch, onMounted, onUnmounted} from "vue";
import {useRouter} from 'vue-router'

export default {
  name: "Category",
  components: {
    NavBar, BackTop
  },
  setup() {
    const active = ref(0)
    const activeKey = ref(0)
    const activeName = ref(1)

    const categories = ref([])

    // 分类，排序
    const currentCid = ref(0)
    const currentOrder = ref('sales')

    // 数据模型
    const goods = reactive({
      sales: {page: 0, list: []},
      price: {page: 0, list: []},
      comments_count: {page: 0, list: []}
    })

    // 渲染数据
    const types = ['sales', 'price', 'comments_count']
    const showGoods = computed(() => goods[currentOrder.value].list)
    const init = () => types.map(type => getCategoryGoods(type, currentCid.value).then(res => goods[type].list = res.goods.data))
    const tabClick = el => currentOrder.value = el.name
    const getGoods = id => {
      currentCid.value = id
      init();
    }

    // 上拉加载
    const loading = ref(false)
    const finished = ref(false)
    const onLoad = () => getCategoryGoods(currentOrder.value, currentCid.value, ++goods[currentOrder.value].page).then(res => goods[currentOrder.value].list.push(...res.goods.data))

    // 内容路由
    const router = useRouter()
    const itemClick = id => router.push({
      name: 'Detail',
      params: {
        id
      }
    })

    // 回到顶部
    const isShowBackTop = ref(false)
    const bTop = () => {
      let back = setInterval(() => {
        if (document.body.scrollTop || document.documentElement.scrollTop) {
          document.body.scrollTop -= 50;
          document.documentElement.scrollTop -= 50;
        } else {
          clearInterval(back);
        }
      })
    }
    const scrollToTop = () => {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      isShowBackTop.value = scrollTop > 500
    }

    // 挂载完成
    onMounted(() => {
      getCategory().then(res => categories.value = res.categories)
      init();
      window.addEventListener("scroll", scrollToTop)
    })
    onUnmounted(() => window.removeEventListener("scroll", scrollToTop))

    return {
      active,
      activeKey,
      activeName,
      categories,
      showGoods,
      tabClick,
      getGoods,
      loading,
      finished,
      onLoad,
      isShowBackTop,
      itemClick,
      bTop
    }
  }
}
</script>

<style scoped lang="scss">
#category {
  #mainbox {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 50px;
  }

  .ordertab {
    position: fixed;
    top: 45px;
    left: 130px;
    right: 0;
    z-index: 99;
  }

  .leftmenu {
    position: fixed;
    top: 90px;
    width: 130px;
  }

  .goodslist {
    position: absolute;
    top: 55px;
    left: 130px;
    right: 15px;
    text-align: left;
  }
}
</style>